<template>
    <div>
        <div class="container" style="padding-left: 30%;">
         <el-row>
            <el-col :span="7" :offset="2"><h2>修改密码</h2></el-col>  
         </el-row>
          
         <el-form :model="userForm"  class="form1"
          ref="ruleFormRef"
           :rules="rules"
            status-icon
         >
             <el-form-item   prop="password">
                 <el-input v-model="userForm.password"  placeholder="请输入原密码" />
             </el-form-item>
             <el-form-item prop="newPwd" >
                 <el-input v-model="userForm.newPwd" placeholder="请输入新密码"  />
             </el-form-item>
             <el-form-item  prop="reNewPwd">
                 <el-input v-model="userForm.reNewPwd" placeholder="请再次输入新密码" />
             </el-form-item>
             <el-form-item >
                 <el-button type="success" @click="save(ruleFormRef)">完成</el-button>
             </el-form-item>
         </el-form>
        </div>            
   </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
const labelWidth = ref(120)
 const userForm = reactive({
    password:'',
    newPwd:'',
    reNewPwd:''
 })
//自定验证规则
 const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请重新输!！'))
    } else {
        if (userForm.reNewPwd !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('reNewPwd')
        }
        callback()
    }
}
const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请在重新输入!'))
    } else if (value !== userForm.newPwd) {
        callback(new Error("两次输入不一致!"))
    } else {
        callback()
    }
}

 const rules = reactive ({
    password: [
        { required: true, message: '请输入原密码', trigger: 'blur' },
        { min: 6, max: 32, message: '长度必须在6位以上', trigger: 'blur' },
    ],
    newPwd: [{ validator: validatePass, trigger: 'blur' }, { min: 6, max: 32, message: '长度必须在6位以上', trigger: 'blur' },],
    reNewPwd: [{ validator: validatePass2, trigger: 'blur' },
    { min: 6, max: 32, message: '长度必须在6位以上', trigger: 'blur'},],
})

const ruleFormRef = ref()
const save=(formEl)=>{
     if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('确认修改密码!')
        } else {
            console.log('表单基本验证不通过!')
        }
    })
 }
</script >
<style lang="less" scoped>
.form1{
    max-width: 600px;
    margin-top: 20px;
    .el-input{
        width: 60%;
    }
    .el-button{
        width: 60%;
    }
}
</style>